var musicSearchBtn = document.getElementById("music-search-btn"),
    musicSearchContent = document.getElementById("music-search-content"),
    musicSearchWaiting = document.getElementById("music-search-waiting"),
    musicSearchResultBox = document.getElementById("music-search-result-box");
var musicTopxxContentBox = document.getElementById("music-topxx-content-box");
// top20模块
function musicTopxxx()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            // console.log(xmlhttp.responseText);
            // console.log("4");
            // 搜索完毕隐藏动画div
            // searchWaiting.style.display = "none";
            var result = JSON.parse(xmlhttp.responseText);
            // showResult(searchResult);
            // console.log(searchResult);
            var tempData = result.showapi_res_body.pagebean;
            console.log(tempData);
            var html = template("topTemp", tempData);
            // console.log(html);
            musicTopxxContentBox.innerHTML = html;
        }
    }
    // https://route.showapi.com/213-1?keyword=海阔天空&page=1&showapi_appid=31921&showapi_sign=7b3f1d2bac974bdf83fdd5e052d988fd
    xmlhttp.open("GET","https://route.showapi.com/213-4?topid=23&showapi_appid=31921&showapi_sign=7b3f1d2bac974bdf83fdd5e052d988fd",true);
    xmlhttp.send();
}
// 搜歌模块
function searchSong()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            // console.log(xmlhttp.responseText);
            console.log("4");
            // 搜索完毕隐藏动画div
            musicSearchWaiting.style.display = "none";
            var searchResult = JSON.parse(xmlhttp.responseText);
            showResult(searchResult);
            console.log(searchResult);
        }
    }
    // https://route.showapi.com/213-1?keyword=海阔天空&page=1&showapi_appid=31921&showapi_sign=7b3f1d2bac974bdf83fdd5e052d988fd
    xmlhttp.open("GET","https://route.showapi.com/213-1?keyword="+musicSearchContent.value+"&page=1&showapi_appid=31921&showapi_sign=7b3f1d2bac974bdf83fdd5e052d988fd",true);
    xmlhttp.send();
}

function showResult(result) {
    // var content =
    // console.log(resultContentBox);
    var tempData = result.showapi_res_body.pagebean;
    console.log(tempData);
    var html = template("showTemp", tempData);
    // console.log(html);
    musicSearchResultBox.innerHTML = html;
}

musicSearchBtn.onclick = function(event){
    console.log(musicSearchContent.value);
    if(musicSearchContent.value){
        // 搜索等待动画
        musicSearchWaiting.style.display = "block";
        searchSong();
    }
};

function resultPlay(button) {
    musicAudioSource.setAttribute("title",button.parentNode.dataset.title);
    musicAudio.setAttribute("src",button.parentNode.dataset.src);
    musicAudioSource.setAttribute("data-singer",button.parentNode.dataset.singer);
    if (button.parentNode.dataset.img) {
        musicAudioSource.setAttribute("data-img",button.parentNode.dataset.img);
    }else {
        musicAudioSource.setAttribute("data-img","./img/no_img_song.jpg");
    }

    console.log(button.parentNode);
    // console.log(source);
    setTimeout(function () {
        musicControlsPlay.click();
    }, 500);
}
function resultCardIn(div) {
    div.getElementsByTagName("button")[0].style.display="block";
}
function resultCardOut(div) {
    div.getElementsByTagName("button")[0].style.display="none";
}

musicTopxxx();
